<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系我们 - 云秒科技</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Element UI CSS (仅用于样式) -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /* Element UI 样式覆盖，适配网站主题 */
        .el-form-item__label {
            color: var(--text-dark);
            font-weight: 500;
        }
        .el-input__inner,
        .el-textarea__inner {
            border-color: #e5e7eb;
            border-radius: 8px;
        }
        .el-input__inner:focus,
        .el-textarea__inner:focus {
            border-color: var(--primary-color);
        }
        .el-button--primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        .el-button--primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }
        .el-message {
            min-width: 300px;
        }
        .contact-form {
            padding: 20px 0;
        }
        /* 表单样式 */
        .form-item {
            margin-bottom: 22px;
        }
        .form-label {
            display: block;
            color: var(--text-dark);
            font-weight: 500;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .form-label.required::before {
            content: '*';
            color: #f56c6c;
            margin-right: 4px;
        }
        .form-input,
        .form-textarea {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
            box-sizing: border-box;
        }
        .form-input:focus,
        .form-textarea:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        .form-input.error,
        .form-textarea.error {
            border-color: #f56c6c;
        }
        .form-textarea {
            min-height: 120px;
            resize: vertical;
            font-family: inherit;
        }
        .form-error {
            color: #f56c6c;
            font-size: 12px;
            margin-top: 4px;
            display: none;
        }
        .form-error.show {
            display: block;
        }
        .form-word-count {
            color: #909399;
            font-size: 12px;
            text-align: right;
            margin-top: 4px;
        }
        .submit-btn {
            width: 100%;
            padding: 12px 20px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .submit-btn:hover {
            background-color: var(--primary-dark);
        }
        .submit-btn:disabled {
            background-color: #c0c4cc;
            cursor: not-allowed;
        }
        .submit-btn.loading {
            position: relative;
            color: transparent;
        }
        .submit-btn.loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            border: 2px solid #fff;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <nav class="navbar" id="navbar">
        <div class="container">
            <div class="nav-wrapper">
                <div class="logo">
                    <img src="images/云秒科技.png" alt="云秒科技">
                </div>
                <ul class="nav-menu" id="navMenu">
                    <li><a href="index.html" class="nav-link">首页</a></li>
                    <li><a href="about.html" class="nav-link">关于</a></li>
                    <li><a href="product.html" class="nav-link">产品</a></li>
                    <li><a href="scheme.html" class="nav-link">方案</a></li>
                    <li><a href="case.html" class="nav-link">案例</a></li>
                    <li><a href="contact.html" class="nav-link active">联系我们</a></li>
                </ul>
                <div class="hamburger" id="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </nav>

    <header class="page-hero">
        <div class="container">
            <h1>联系我们</h1>
            <p>期待与您合作，共建智慧中医新生态</p>
        </div>
    </header>

    <main class="page-content">
        <div class="container">
            <div class="cards-grid" style="grid-template-columns: repeat(2, 1fr);">
                <div class="card">
                    <h3>联系方式</h3>
                    <p><i class="fas fa-phone"></i> 电话：400-000-0000</p>
                    <p><i class="fas fa-envelope"></i> 邮箱：contact@yunmiao.com</p>
                    <p><i class="fas fa-map-marker-alt"></i> 地址：杭州市 · 未来科技城</p>
                    <p><i class="fas fa-clock"></i> 工作时间：工作日 9:00-18:00</p>
                </div>
                <div class="card">
                    <h3>在线留言</h3>
                    <div class="contact-form">
                        <form id="contactForm">
                            <div class="form-item">
                                <label class="form-label required">您的姓名</label>
                                <input 
                                    type="text" 
                                    id="name" 
                                    name="name"
                                    class="form-input" 
                                    placeholder="请输入您的姓名"
                                    autocomplete="name">
                                <div class="form-error" id="nameError"></div>
                            </div>
                            
                            <div class="form-item">
                                <label class="form-label required">您的邮箱</label>
                                <input 
                                    type="email" 
                                    id="email" 
                                    name="email"
                                    class="form-input" 
                                    placeholder="请输入您的邮箱"
                                    autocomplete="email">
                                <div class="form-error" id="emailError"></div>
                            </div>
                            
                            <div class="form-item">
                                <label class="form-label required">联系电话</label>
                                <input 
                                    type="tel" 
                                    id="phone" 
                                    name="phone"
                                    class="form-input" 
                                    placeholder="请输入您的联系电话"
                                    autocomplete="tel">
                                <div class="form-error" id="phoneError"></div>
                            </div>
                            
                            <div class="form-item">
                                <label class="form-label required">留言内容</label>
                                <textarea 
                                    id="message" 
                                    name="message"
                                    class="form-textarea" 
                                    placeholder="请输入您的留言内容"
                                    maxlength="500"></textarea>
                                <div class="form-word-count">
                                    <span id="wordCount">0</span> / 500
                                </div>
                                <div class="form-error" id="messageError"></div>
                            </div>
                            
                            <div class="form-item">
                                <button type="submit" class="submit-btn" id="submitBtn">
                                    <i class="fas fa-paper-plane"></i>
                                    <span id="submitText">提交留言</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="images/云秒科技.png" alt="云秒科技">
                </div>
                <div class="footer-about">
                    <h3>关于云秒科技</h3>
                    <p>AI驱动的数字中医整体方案，打通"诊疗—药事—康复—随访"，助力机构智能化升级。</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 杭州云秒科技有限公司 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- Mock.js -->
    <script src="https://unpkg.com/mockjs/dist/mock.js"></script>
    <!-- 原有脚本 -->
    <script src="js/script.js"></script>
    
    <script>
        // 表单校验规则（类似 Element UI 的规则）
        const formRules = {
            name: [
                { required: true, message: '请输入您的姓名', trigger: 'blur' },
                { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
            ],
            email: [
                { required: true, message: '请输入您的邮箱', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
            ],
            phone: [
                { required: true, message: '请输入您的联系电话', trigger: 'blur' },
                { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
            ],
            message: [
                { required: true, message: '请输入留言内容', trigger: 'blur' },
                { min: 10, max: 500, message: '留言内容长度在 10 到 500 个字符', trigger: 'blur' }
            ]
        };

        // 显示错误消息（类似 Element UI 的 Message）
        function showMessage(message, type = 'success') {
            // 创建消息元素
            const messageEl = document.createElement('div');
            messageEl.className = `el-message el-message--${type}`;
            messageEl.style.cssText = `
                position: fixed;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 3000;
                padding: 15px 20px;
                background-color: ${type === 'success' ? '#67c23a' : type === 'error' ? '#f56c6c' : '#e6a23c'};
                color: white;
                border-radius: 4px;
                box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
                animation: slideDown 0.3s ease;
            `;
            messageEl.textContent = message;
            
            // 添加动画样式
            if (!document.getElementById('messageStyle')) {
                const style = document.createElement('style');
                style.id = 'messageStyle';
                style.textContent = `
                    @keyframes slideDown {
                        from {
                            opacity: 0;
                            transform: translateX(-50%) translateY(-20px);
                        }
                        to {
                            opacity: 1;
                            transform: translateX(-50%) translateY(0);
                        }
                    }
                `;
                document.head.appendChild(style);
            }
            
            document.body.appendChild(messageEl);
            
            // 3秒后移除
            setTimeout(() => {
                messageEl.style.animation = 'slideDown 0.3s ease reverse';
                setTimeout(() => {
                    document.body.removeChild(messageEl);
                }, 300);
            }, 3000);
        }

        // 表单校验函数
        function validateField(fieldName, value) {
            const rules = formRules[fieldName];
            if (!rules) return { valid: true };
            
            for (let rule of rules) {
                // 必填校验
                if (rule.required && (!value || value.trim() === '')) {
                    return { valid: false, message: rule.message };
                }
                
                // 长度校验
                if (rule.min && value.length < rule.min) {
                    return { valid: false, message: rule.message };
                }
                if (rule.max && value.length > rule.max) {
                    return { valid: false, message: rule.message };
                }
                
                // 类型校验
                if (rule.type === 'email') {
                    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                    if (value && !emailRegex.test(value)) {
                        return { valid: false, message: rule.message };
                    }
                }
                
                // 正则校验
                if (rule.pattern && value) {
                    if (!rule.pattern.test(value)) {
                        return { valid: false, message: rule.message };
                    }
                }
            }
            
            return { valid: true };
        }

        // 显示字段错误
        function showFieldError(fieldName, message) {
            const input = document.getElementById(fieldName);
            const errorEl = document.getElementById(fieldName + 'Error');
            
            if (input) {
                input.classList.add('error');
            }
            if (errorEl) {
                errorEl.textContent = message;
                errorEl.classList.add('show');
            }
        }

        // 清除字段错误
        function clearFieldError(fieldName) {
            const input = document.getElementById(fieldName);
            const errorEl = document.getElementById(fieldName + 'Error');
            
            if (input) {
                input.classList.remove('error');
            }
            if (errorEl) {
                errorEl.textContent = '';
                errorEl.classList.remove('show');
            }
        }

        // 校验整个表单
        function validateForm(formData) {
            let isValid = true;
            
            // 清除所有错误
            Object.keys(formRules).forEach(key => {
                clearFieldError(key);
            });
            
            // 校验每个字段
            Object.keys(formRules).forEach(key => {
                const value = formData[key] || '';
                const result = validateField(key, value);
                
                if (!result.valid) {
                    showFieldError(key, result.message);
                    isValid = false;
                }
            });
            
            return isValid;
        }

        // Mock API 函数 - 模拟后端接口
        function mockSubmitContact(data) {
            return new Promise((resolve) => {
                // 模拟网络延迟（500-1500ms）
                const delay = Math.random() * 1000 + 500;
                
                setTimeout(() => {
                    // 模拟成功/失败（90%成功率）
                    const success = Math.random() > 0.1;
                    
                    if (success) {
                        resolve({
                            data: {
                                code: 200,
                                message: '留言提交成功！我们会尽快与您联系。',
                                data: {
                                    id: Mock.Random.id(),
                                    name: data.name,
                                    email: data.email,
                                    phone: data.phone || '未填写',
                                    message: data.message,
                                    submitTime: new Date().toISOString(),
                                    status: 'pending'
                                }
                            },
                            status: 200,
                            statusText: 'OK'
                        });
                    } else {
                        resolve({
                            data: {
                                code: 500,
                                message: '服务器繁忙，请稍后重试。',
                                data: null
                            },
                            status: 500,
                            statusText: 'Internal Server Error'
                        });
                    }
                }, delay);
            });
        }
        
        // 使用 Mock.js 拦截 HTTP 请求（在请求发送前拦截，避免405错误）
        // Mock.js 会拦截 XMLHttpRequest，请求不会真正发送到服务器
        Mock.mock(/\/api\/contact\/submit/, 'post', function(options) {
            // 解析请求数据
            let data;
            try {
                data = typeof options.body === 'string' 
                    ? JSON.parse(options.body) 
                    : (options.body || {});
            } catch (e) {
                data = {};
            }
            
            // 模拟成功/失败（90%成功率）
            const success = Math.random() > 0.1;
            
            if (success) {
                return {
                    code: 200,
                    message: '留言提交成功！我们会尽快与您联系。',
                    data: {
                        id: Mock.Random.id(),
                        name: data.name || '',
                        email: data.email || '',
                        phone: data.phone || '未填写',
                        message: data.message || '',
                        submitTime: new Date().toISOString(),
                        status: 'pending'
                    }
                };
            } else {
                return {
                    code: 500,
                    message: '服务器繁忙，请稍后重试。',
                    data: null
                };
            }
        });
        
        // 请求拦截器：添加延迟（Mock.js本身不支持延迟，我们在拦截器中添加）
        axios.interceptors.request.use(function(config) {
            if (config.url === '/api/contact/submit') {
                // 标记为Mock请求，稍后添加延迟
                config._isMockRequest = true;
            }
            return config;
        });
        
        // 响应拦截器：处理Mock响应并添加延迟
        axios.interceptors.response.use(
            function(response) {
                // 如果是Mock请求，添加延迟效果
                if (response.config && response.config._isMockRequest) {
                    return new Promise((resolve) => {
                        const delay = Math.random() * 1000 + 500; // 500-1500ms
                        setTimeout(() => {
                            resolve(response);
                        }, delay);
                    });
                }
                return response;
            },
            function(error) {
                // 如果请求失败，尝试使用Mock数据
                if (error.config && error.config.url === '/api/contact/submit') {
                    const data = typeof error.config.data === 'string' 
                        ? JSON.parse(error.config.data) 
                        : error.config.data;
                    return mockSubmitContact(data);
                }
                return Promise.reject(error);
            }
        );

        // 表单提交处理
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('contactForm');
            const submitBtn = document.getElementById('submitBtn');
            const submitText = document.getElementById('submitText');
            const messageTextarea = document.getElementById('message');
            const wordCount = document.getElementById('wordCount');
            
            // 字数统计
            if (messageTextarea && wordCount) {
                messageTextarea.addEventListener('input', function() {
                    wordCount.textContent = this.value.length;
                });
            }
            
            // 实时校验（失焦时）
            Object.keys(formRules).forEach(fieldName => {
                const input = document.getElementById(fieldName);
                if (input) {
                    input.addEventListener('blur', function() {
                        const value = this.value || '';
                        const result = validateField(fieldName, value);
                        
                        if (!result.valid) {
                            showFieldError(fieldName, result.message);
                        } else {
                            clearFieldError(fieldName);
                        }
                    });
                    
                    input.addEventListener('input', function() {
                        // 输入时清除错误状态
                        if (this.classList.contains('error')) {
                            const value = this.value || '';
                            const result = validateField(fieldName, value);
                            if (result.valid) {
                                clearFieldError(fieldName);
                            }
                        }
                    });
                }
            });
            
            // 表单提交
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 收集表单数据
                const formData = {
                    name: document.getElementById('name').value.trim(),
                    email: document.getElementById('email').value.trim(),
                    phone: document.getElementById('phone').value.trim(),
                    message: document.getElementById('message').value.trim()
                };
                
                // 校验表单
                if (!validateForm(formData)) {
                    showMessage('请完善表单信息', 'warning');
                    return;
                }
                
                // 提交表单
                submitBtn.disabled = true;
                submitBtn.classList.add('loading');
                submitText.textContent = '提交中...';
                
                // 使用 axios 发送请求（会被 Mock 拦截）
                axios.post('/api/contact/submit', formData, {
                    _isMock: true  // 标记为 Mock 请求
                })
                    .then(response => {
                        submitBtn.disabled = false;
                        submitBtn.classList.remove('loading');
                        submitText.textContent = '提交留言';
                        
                        if (response.data.code === 200) {
                            showMessage(response.data.message, 'success');
                            
                            // 重置表单
                            form.reset();
                            wordCount.textContent = '0';
                            
                            // 清除所有错误状态
                            Object.keys(formRules).forEach(key => {
                                clearFieldError(key);
                            });
                            
                            // 控制台输出提交的数据（用于调试）
                            console.log('提交成功，返回数据：', response.data.data);
                        } else {
                            showMessage(response.data.message || '提交失败，请稍后重试', 'error');
                        }
                    })
                    .catch(error => {
                        submitBtn.disabled = false;
                        submitBtn.classList.remove('loading');
                        submitText.textContent = '提交留言';
                        
                        console.error('提交错误：', error);
                        showMessage('网络错误，请检查网络连接后重试', 'error');
                    });
            });
        });
    </script>
</body>
</html>
